<script setup lang="ts">
  import { backgroundPicture } from '@vben/os';
  import { useDesktopStore } from '@vben/stores';

  import { Card, Image, Radio, RadioGroup } from 'ant-design-vue';
  import { storeToRefs } from 'pinia';

  const { desktopBg } = storeToRefs(useDesktopStore());
</script>

<template>
  <div class="p-5">
    <Card class="mb-5" title="当前背景地址">
      {{ desktopBg }}
    </Card>
    <Card class="mb-5" title="桌面背景">
      <RadioGroup v-model:value="desktopBg">
        <Radio v-for="image in backgroundPicture" :key="image" :value="`url(${image})`">
          <Image :preview="false" :src="image" :width="80" />
        </Radio>
      </RadioGroup>
    </Card>
  </div>
</template>
